<template>
    <div :class='arrangement == "transverse" ? "item transverse mr-20" : "item vertical"' v-for="(item,index) in goodList" :key="index" @click="toArticle(item)">
        <div>
            <el-image class="pic" :src="item.productDetail.prodcutPicList.thumbnailUrl" fit="cover"></el-image>
            <!-- <img :src="item.productDetail.prodcutPicList.thumbnailUrl" alt=""> -->
        </div>
        <div class="info">
            <div class="title">{{item.productTitle}}</div>
            <div class="priceBlock">
                <el-button v-if="showButton" class="btn btn_gradient" round type="primary">立即咨询</el-button>
                <span class="currency">{{item.productCurrency}}</span>
                <span class="price"> <el-statistic :precision="2" :value="item.productPrice"></el-statistic></span>
                <span class="unit">/台</span>
            </div>
        </div>
    </div>
</template>
<script setup>
import { useRouter } from "vue-router";

const $router = useRouter();
const props = defineProps({
    showButton: {
        type: Boolean,
        default: true
    },
    arrangement: {
        type: String,
        default: "transverse"
    },
    goodList: {
        type: Array,
        default: () => { }
    }
})
const toArticle = (item) => {
    $router.push({ path: "/GoodArticle", query: { id: item.id } })
}

</script>

<style lang="less" scoped>
.item {
    height: 284px;
    background: #ffffff;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #e9e9e9;
    cursor: pointer;
    &.transverse {
        width: 283px;
        .info {
            width: 255px;
        }
    }
    &.vertical {
        width: 260px;
        .info {
            width: 230px;
        }
    }
    &:nth-child(4n) {
        margin-right: 0;
    }
    .pic {
        width: 100%;
        height: 155px;
    }
    .info {
        margin: 0 auto;
        .priceBlock {
            font-family: DINAlternate-Bold, DINAlternate;
            color: #ee5b5b;
            font-weight: bold;
            .btn {
                float: right;
                width: 68px;
                height: 23px;
                font-size: 12px;
                font-weight: 400;
            }
            .currency {
                font-size: 12px;
                line-height: 14px;
                margin-right: 10px;
            }
            .price {
                font-size: 22px;
                line-height: 26px;
                margin-right: 2px;
                .el-statistic {
                    display: inline-block;
                }
            }
            .unit {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #8d9297;
                line-height: 17px;
            }
        }
        .title {
            margin: 20px auto;
            height: 44px;
            font-size: 16px;
            font-weight: 400;
            color: #092036;
            line-height: 22px;
            display: -webkit-box; /* 设置为弹性盒子布局 */
            -webkit-box-orient: vertical; /* 设置为垂直排列 */
            -webkit-line-clamp: 2; /* 设置最多显示的行数 */
            overflow: hidden; /* 溢出隐藏 */
            text-overflow: ellipsis; /* 显示省略号 */
        }
    }
}
</style>